<script setup>
import { ref } from 'vue'

import {
  CheckCircleIcon,
  ExclamationTriangleIcon,
  InformationCircleIcon,
  XCircleIcon,
  XMarkIcon,
} from '@heroicons/vue/20/solid'

const props = defineProps({
  type: { type: String, default: 'info' },
  title: { type: String },
  content: { type: String },
  delay: { type: Number, default: 3 * 1000 },
  onClose: { type: Function, default: () => { } },
})

const textColors = {
  default: 'text-gray-400 hover:text-gray-600',
  success: 'text-green-400 hover:text-green-600',
  info: 'text-blue-400 hover:text-blue-600',
  warning: 'text-yellow-400 hover:text-yellow-500',
  error: 'text-red-400 hover:text-red-600',
  primary: 'text-indigo-400 hover:text-indigo-600',
}

const icons = {
  info: InformationCircleIcon,
  success: CheckCircleIcon,
  warning: ExclamationTriangleIcon,
  error: XCircleIcon,
}

const show = ref(true)

function closeModal() {
  show.value = false
  props.onClose()
}

setTimeout(() => closeModal(), props.delay)
</script>

<template>
  <div
    v-if="show"
    aria-live="assertive"
    class="pointer-events-none fixed z-50 inset-0 flex justify-center w-full px-4 py-6 sm:items-start sm:p-6"
  >
    <div class="flex w-full flex-col items-center space-y-4">
      <!-- Notification panel, dynamically insert this into the live region when it needs to be displayed -->
      <transition
        enter-active-class="transform ease-out duration-300 transition"
        enter-from-class="translate-y-2 opacity-0 sm:translate-y-0 sm:translate-x-2"
        enter-to-class="translate-y-0 opacity-100 sm:translate-x-0"
        leave-active-class="transition ease-in duration-100"
        leave-from-class="opacity-100"
        leave-to-class="opacity-0"
      >
        <div
          v-if="show"
          class="pointer-events-auto w-full max-w-sm overflow-hidden rounded-lg bg-white shadow-md
          ring-1 ring-black ring-opacity-5"
        >
          <div class="p-4">
            <div class="flex items-start">
              <div class="flex-shrink-0">
                <component
                  :is="icons[props.type]"
                  class="h-6 w-6"
                  :class="[textColors[type]]"
                  aria-hidden="true"
                />
              </div>
              <div class="ml-3 w-0 flex-1 pt-0.5">
                <p v-if="title" class="text-sm font-medium text-gray-900 mb-1">
                  {{ title }}
                </p>
                <p class="text-sm text-gray-600">
                  {{ content }}
                </p>
              </div>
              <div class="ml-4 flex flex-shrink-0">
                <button
                  type="button" class="inline-flex rounded-md bg-white text-gray-400
                hover:text-gray-500 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2"
                  @click="show = false"
                >
                  <span class="sr-only">Close</span>
                  <XMarkIcon class="h-5 w-5 text-gray-500" aria-hidden="true" />
                </button>
              </div>
            </div>
          </div>
        </div>
      </transition>
    </div>
  </div>
</template>
